

//渲染层组件
//标签绑定


//工具函数
//关闭小框的按钮  修改display的样式  用于页面上自加载的元素
function closefatherBtmOnClick(a) {
    a.parentNode.classList.remove('showUp');
}

//关闭小框的按钮  用remove函数  用于页面上自加载的元素
function removefatherBtmOnClick(a) {
    a.parentNode.remove()
}

// function ObserverObj (obj,doing,thing){ 
//     this.obj = obj;
//     this.doing =doing;
//     this.thing = thing;
// }
function observerAPI(obj,ad,doing,thing){//用观察者API观察对象的变化
    //被观察的对象，做出反应的对象，做什么
    const dothing = (mutationList)=>{
    let hasShowUp = obj.classList.contains('showUp') ;
    if(hasShowUp == false){
        $publicVar_Obj = null;
                switch(doing){
                    case 'remove':
                    ad.classList.remove(thing);
                    break;
                    case 'add':
                    ad.classList.add(thing);
                    break;
                }
                observer.disconnect();
            
      }};
    const config = { 
      subtree:true,
      attributes:true,
      childList:false,
      attributeOldValue:true,
      attributeFilter: ["class"],
    }
    var observer = new MutationObserver(dothing)
    observer.observe(obj,config)
      // dimobserver.disconnect();
    };

//栏位清空
var $Z_box = document.querySelectorAll('.Zbox');
function $Z_fn_pageShow(obj){
    
           for(var i = 0;i<$Z_box.length;i++){
            $Z_box[i].classList.remove('showUp')
           }
           obj.classList.add('showUp');
           $Zclass.innerHTML = '';
           $Zcontent.innerHTML = '';
           $Znews.innerHTML = '';
}
  


//$H 头页栏
var $H_classBtm = document.getElementsByClassName('Classs')[0]; //组按钮
var $H_signInBtm = document.getElementsByClassName('signInBox')[0]; //登录按钮
var $H_userBtm = document.getElementsByClassName('signInBox')[1]; //用户按钮

var $H_fn_headshowup =()=>{
    $H_signInBtm.classList.remove('showUp');
    $H_userBtm.classList.add('showUp');
    $H_classBtm.classList.add('showUp');
    $H_userBtm.getElementsByClassName('UserName')[0].innerText = $Data_userName;
}

$H_signInBtm.addEventListener('click',function(){
    if($Data_islogin =='yes'){
          return;
    }else {
        window.location = './signIn.html';
    }
})

$H_classBtm.addEventListener('click',function(){
    
    $Z_fn_pageShow($Zclass);
 
    var classNameArr=[];   
    var classRootArr=[];
    let classIdArr = userClassIdArr(); //先拿到ID组

    if(classIdArr == null){ 
       styleGZ.boxComponent("addClassBoxMod",'');
       return;
    }else{
 
        for(var i = 0;i<classIdArr.length;i++){
            var noSave =getLocalStarged('查指定组信息', classIdArr[i]); 
            var className =noSave.className;
            var classRoot =noSave.classRoot;
            classNameArr.push(className);
            classRootArr.push(classRoot);
    }};
    for(var i = 0;i<classIdArr.length;i++){

        let  className =classNameArr[i]
        let  classRoot =classRootArr[i]
        var classboxArr=styleGZ.boxComponent('ClassBoxMod',classIdArr[i]);
        classboxArr.obj.addEventListener('click',function(){
            classBoxOnClick(this);
        })
        
        classboxArr.classNameSpanobj.innerHTML=className;
        classboxArr.classRootSpanobj.innerHTML=classRoot;
        classboxArr.img.innerText = 'img'
    }
    return styleGZ.boxComponent("addClassBoxMod",'');})

function ClassBtmClick(){
    
    $Z_fn_pageShow($Zclass);
 
    var classNameArr=[];   
    var classRootArr=[];
    let classIdArr = userClassIdArr(); //先拿到ID组

    if(classIdArr == null){ 
       styleGZ.boxComponent("addClassBoxMod",'');
       return;
    }else{
 
        for(var i = 0;i<classIdArr.length;i++){
            var noSave =getLocalStarged('查指定组信息', classIdArr[i]); 
            var className =noSave.className;
            var classRoot =noSave.classRoot;
            classNameArr.push(className);
            classRootArr.push(classRoot);
    }};
    for(var i = 0;i<classIdArr.length;i++){

        let  className =classNameArr[i]
        let  classRoot =classRootArr[i]
        var classboxArr=styleGZ.boxComponent('ClassBoxMod',classIdArr[i]);
        classboxArr.obj.addEventListener('click',function(){
            classBoxOnClick(this);
        })
        classboxArr.classNameSpanobj.innerHTML=className;
        classboxArr.classRootSpanobj.innerHTML=classRoot;
    }
    return styleGZ.boxComponent("addClassBoxMod",'');}


//$Zclass 栏组件 //组览
var $Zclass = document.getElementsByClassName('Zclass')[0];


function classBoxOnClick(classBox) {  //组卡片点击 可以传被点击的对象，也可以传对象的ID字符串
    $Z_fn_pageShow($Zcontent);
    let boxIdStr = localStorage.getItem(classBox.id+'_boxidStr');
    let boxIdArr =  createStr(boxIdStr,',');
    $rightNav_Btm_add.classList.add('showUp');
    $rightNav_Btm_tag.classList.add('showUp');
    //这里后期还需要加一层判断，classBox.id是否为用户所在的组
    for(var i = 0; i<boxIdArr.length;i++){
        let boxLocalS = getLocalStarged('查内容库',boxIdArr[i]);
        let contentBoxArr = styleGZ.boxComponent('contentBoxMod',boxIdArr[i]);
        contentBoxArr.nameDatetag.innerHTML = boxLocalS.user+ '--' + boxLocalS.time; 
        contentBoxArr.contentTag.innerText = boxLocalS.contentBody;
        contentBoxArr.contentHead.innerText = boxLocalS.head;

        

        

        

        contentBoxArr. contentBox_tagBox_editbtm_box;

    }

    $publicVar_Obj = classBox;
    observerAPI($Zcontent,$rightNav_Btm_add,'remove','showUp');
    observerAPI($Zcontent,$rightNav_Btm_tag,'remove','showUp');
    
}



//$Znews 栏组件 //新闻
var $Znews = document.getElementsByClassName('Znews')[0];

//$Zcontent 栏组件 //日志
var $Zcontent = document.getElementsByClassName('Zcontent')[0];


//$T_addClass 新增组 块
var $T_addClass = document.getElementsByClassName('addClass')[0];//新增小组的页面
var $T_addClass_closeBtm =  $T_addClass.getElementsByClassName('closefatherBtm')[0]; //新增小组页面的关闭按钮
var $T_addClass_addClassBtm = document.getElementsByClassName('addClassBtm')[0];//新增小组页面的新增按钮
var $T_addClass_intoClassBtm = document.getElementsByClassName('addClassBtm')[1];//新增小组页面的加入按钮
var $T_addClass_addClassNameInput = document.getElementsByClassName('intoClassInput')[0];//新增小组页面的新增输入栏
var $T_addClass_intoClassIdInput = document.getElementsByClassName('intoClassInput')[1];//新增小组页面的加入输入栏
var $T_addClass_submitBtm = document.getElementsByClassName('classAddClasssubmitBtm')[0]

$T_addClass_closeBtm.addEventListener('click',function(){
    closefatherBtmOnClick(this);
})

$T_addClass_addClassBtm.addEventListener('click',function(){
    $T_addClass_addClassBtm.classList.remove('addClassBtmUp')
    $T_addClass_intoClassBtm.classList.add('addClassBtmUp');
    $T_addClass_intoClassIdInput.value = ''
    $T_addClass_intoClassIdInput.classList.add('showUp')
    $T_addClass_addClassNameInput.classList.remove('showUp')
})

$T_addClass_intoClassBtm.addEventListener('click',function(){
    // console.log($T_addClass_addClassBtm,$T_addClass_intoClassBtm);
    $T_addClass_addClassBtm.classList.add('addClassBtmUp')
    $T_addClass_intoClassBtm.classList.remove('addClassBtmUp');
   $T_addClass_intoClassIdInput.value = ''
   $T_addClass_intoClassIdInput.classList.remove('showUp')
   $T_addClass_addClassNameInput.classList.add('showUp')
})

$T_addClass_submitBtm.addEventListener('click',function(){//新增小组的提交按钮点击
   if (getComputedStyle($T_addClass_intoClassIdInput).display == 'block') {

    }else{
        //$Data_userName
         let newClassName = $T_addClass_addClassNameInput.value;
         if(newClassName == ''){
                 return alert('请设置小组名称')
         }
         let idnum = userClassIdArr();

         if(!idnum){
            
            var randNum = Math.round(Math.random()*(9999-1000)+1000)+'';
            classMsgStorage(randNum,newClassName,$Data_userName);
            classMeteStorage(randNum,'新建', $Data_userName);
            contentMsgStorage(randNum,$Data_userName,'new','','');
            localStorage.setItem(sessionStorage.getItem('userName')+'CIdArr',randNum);
        }else{ 
            do{ 
                var noSave =true;
                var randNum = Math.round(Math.random()*(9999-1000)+1000)+'';
                for(var i = 0;i<idnum.length;i++){
                      
                      if(idnum[i] == randNum){
                        noSave = false;
                      }

                }
            }while(noSave == false);

            classMsgStorage(randNum,newClassName,$Data_userName);
            classMeteStorage(randNum,'新建', $Data_userName);
            contentMsgStorage(randNum,$Data_userName,'new','','');
            randNum=localStorage.getItem(sessionStorage.getItem('userName')+'CIdArr')+ randNum;
            localStorage.setItem(sessionStorage.getItem('userName')+'CIdArr',randNum);       
        }
       
        closefatherBtmOnClick(this);
        ClassBtmClick();
        
    }

})

//$rightNav 侧边功能组件
var $rightNav_body = document.querySelector('.ZleftNav');
var $rightNav_Btm_top = document.querySelectorAll('.pagetabelBtm')[0];
var $rightNav_Btm_tag = document.querySelectorAll('.pagetabelBtm')[1];
var $rightNav_Btm_add = document.querySelectorAll('.pagetabelBtm')[2];

 $rightNav_Btm_add.addEventListener('click',function(){
   let mainH = document.querySelector('main').offsetHeight;
    $B_edit.classList.add('showUp');
    $B_Btm_submit.doing = 'add';
    if(mainH <= 400){
        $B_edit.style.position = 'absolute';
    }else{
        $B_edit.style.position = 'sticky';
    }
 })

 $rightNav_Btm_top.addEventListener('click',function(){

    document.documentElement.scrollTop=0;
    document.body.scrollTop = 0;
 })



//$B_ 输入编辑器组件
var $B_edit = document.querySelector('.Zedit');
var $B_edit_Area = document.querySelector('.editArea')
var $B_edit_Head = document.querySelector('.editHead')
var $B_Btm_submit = document.querySelectorAll('.editBtm')[0];
var $B_Btm_close = document.querySelectorAll('.editBtm')[document.querySelectorAll('.editBtm').length-1];
$B_Btm_submit.doing = '';

  $B_Btm_submit.addEventListener('click',function(){
   switch($B_Btm_submit.doing){
    case '':
        break;
           case 'add':
            $Z_fn_pageShow($Zcontent);
            let content = $B_edit_Area.value;
            let contentHead = $B_edit_Head.value;
            
            if(content == ''){
                return alert('请输入内容')
            }
            contentMsgStorage($publicVar_Obj.id,$Data_userName,'add',content,contentHead);
            $B_edit_Area.value = ''
            $B_edit_Head.value = ''
            break;
            default:
                $Z_fn_pageShow($Zcontent);
                let Recontent = $B_edit_Area.value;
                let RecontentHead = $B_edit_Head.value;
                if(Recontent == ''){
                    return alert('请输入内容')
                }
                contentMsgStorage($B_Btm_submit.doing,'','edit',Recontent,RecontentHead)
                $B_edit_Area.value = ''
                $B_edit_Head.value = ''
                
                break;

   }
   $B_Btm_submit.doing = '';
    classBoxOnClick($publicVar_Obj)
    closefatherBtmOnClick($B_edit_Area);
  })


  $B_Btm_close.addEventListener('click',function(){
    $B_edit_Area.value = ''
                $B_edit_Head.value = ''
    closefatherBtmOnClick($B_edit_Area);
  })


  //滚轮触发的页面渲染

  



































    //    for(var i = 0;i<a.length;i++){
    // classIdJs = a[i];

//     $.ajax({
//         type: "post",
//         url: "/zhuya/index.php?p=10kmen&a=getContent",
//         data: {classId:a.id},//提交到demo.php的数据
//         dataType: "json",//回调函数接收数据的数据格式

//         success: function (msg) {   //异步 

//             let contentbodySL = styleGZ.Gz(contentBodyObj, contentBodyObj.isClfatherid, msg.content_boxid);
//             let tagboxSL = styleGZ.Gz(tagBoxObj, contentbodySL.id, contentbodySL.id+'tagbox');
//             let contentbox = styleGZ.Gz(contentBoxObj, contentbodySL.id, contentbodySL.id+'contentbox');
//             let nametimetagSL = styleGZ.Gz(nameTimeTagObj, contentbodySL.id+'tagbox', contentbodySL.id+'nametimetag');
//             let contentlineSL = styleGZ.Gz(contentLineObj, contentbodySL.id+'tagbox', contentbodySL.id+'contentline');
//             let reditbox = styleGZ.Gz(reditBoxObj, contentbodySL.id+'tagbox', contentbodySL.id+'reditbox');
//             let contenttag = styleGZ.Gz(contentTagObj, contentbodySL.id+'contentbox', contentbodySL.id+'contenttag');
//             nametimetagSL.innerHTML = msg.content_userofsubmit + '--' + msg.content_timeofsubmit ;
//             contentlineSL.innerHTML = '————————————————————————————————————————————————————————————';
//             contenttag.innerText = msg.content_body;

        

//             let clearbox = styleGZ.Gz(clearBoxObj, contentbodySL.id, contentbodySL.id+'clearbox');



//             // console.log(msg);
//             return msg;
//         },
//         error: function (msg) {
//             console.log(msg);
//             return msg;
//         }
//     });

//     //    }





// function classAddClasssubmitBtmOnClick() {
//     let a = document.getElementById('intoClassIdInput').style.display;

//     if (a == 'block') {
//         let b = document.getElementById('intoClassIdInput').value;

//         $.ajax({
//             type: "post",
//             url: "/zhuya/index.php?p=10kmen&a=intoClass",
//             data: { classId: b },//提交到demo.php的数据
//             dataType: "json",//回调函数接收数据的数据格式

//             success: function (msg) {   //异步 
//                 alert(msg)
//                 if (msg == '小组添加成功!') {
//                     document.getElementById('addClass').style.display = 'none';
//                     // closefatherBtmOnClick(c);
//                     ClasssBtmOnClick();
//                 }
//                 console.log(msg);
//                 return msg;
//             },
//             error: function (msg) {
//                 console.log(msg);
//                 return msg;
//             }
//         });
//     } else if (a == 'none') {
//         let d = document.getElementById('addClassNameInput').value;
//         $.ajax({

//             type: "post",
//             url: "/zhuya/index.php?p=10kmen&a=AddClass",
//             data: { className: d },//提交到demo.php的数据
//             dataType: "json",//回调函数接收数据的数据格式

//             success: function (msg) {   //异步 
//                 console.log(msg);
//                 alert(msg)
//                 if (msg == '创建小组成功！') {
//                     document.getElementById('addClass').style.display = 'none';
//                     // closefatherBtmOnClick(c);
//                     ClasssBtmOnClick();
//                 }

//                 return msg;
//             },
//             error: function (msg) {
//                 console.log(msg);
//                 return msg;
//             }
//         });
//     }

// }









// }


// function ClasssBtmOnClick() {

//     $.ajax({
//         type: "post",
//         url: "/zhuya/index.php?p=10kmen&a=getClassMsgData",
//         data: {},//提交到demo.php的数据
//         dataType: "json",//回调函数接收数据的数据格式

//         success: function (msg) {   //异步 
//             document.getElementById('Zclass').style.opacity = "1"
//             document.getElementById('Zclass').innerHTML = "";

//             let a = msg;
//             var aarr = a[0]; //小组名
//             var barr = a[1]; //小组职位
//             var carr = a[2]; //小组Id

//             if (aarr) {
//                 for (var i = 0; i < aarr.length; i++) {
//                     let classbox = styleGZ.Gz(classBOX,classBOX.isClfatherid, carr[i]);
//                     let Name = aarr[i];
//                     let NameData = barr[i];

//                     if (Name && NameData) {
//                         var c = document.createElement("span")
//                         var d = document.createElement("span")
//                         c.classList = 'nameTagInClassBox'
//                         d.classList = 'rootTagInClassBox'
//                         c.innerText = Name;
//                         d.innerText = NameData;
//                         classbox.appendChild(c);
//                         classbox.appendChild(d);
//                     } else if (!Name && NameData) {
//                         var d = document.createElement("span")
//                         d.innerText = NameData;
//                         classbox.appendChild(d);
//                     }
//                     classbox.onmouseup =function () {              
//                         classBoxOnClick(this);
//                     }
//                 }
//             }
            
//             let classboxaddbtm = styleGZ.Gz(classBoxAddBtm, classBoxAddBtm.isClfatherid, 'classBoxAdd').innerText = '+';
//             return msg;
//         },
//         error: function (msg) {
//             console.log(msg);
//             return msg;
//         }
//     });
// }
